<template>
  <Layout>
    <!-- 左侧 -->
    <template #left-content>
      <div class="header drag">
        <div class="operate-area no-drag">
          <!-- 搜索框 -->
          <div class="search">
            <el-input
              v-model="searchKeyword"
              class="search-input"
              size="small"
              :placeholder="!addContactActive ? '搜索' : '微信号/手机号'"
              clearable
            >
              <template #prefix>
                <span
                  :class="[
                    'iconfont',
                    !addContactActive ? 'icon-sousuo' : 'icon-lianxiren',
                  ]"
                ></span>
              </template>
            </el-input>
          </div>

          <!-- 添加按钮 -->
          <div class="add-operate" @click="changeAddContactActive">
            <div class="add-contact" v-if="!addContactActive">
              <span class="iconfont icon-tianjia"></span>
            </div>

            <div v-else class="add-contact-cancel">取消</div>
          </div>
        </div>
      </div>

      <el-scrollbar>
        <div v-if="!addContactActive && !searchKeyword">
          <div class="contack-book-manage">
            <div class="manage-box">
              <span class="iconfont icon-lianxiren"></span>
              <span>通讯录管理</span>
            </div>
          </div>
          <ContactItem
            v-for="item in menuGroup"
            :key="item.group_key"
            :item-data="item"
          ></ContactItem>
        </div>

        <div class="search-list" v-show="addContactActive || searchKeyword">
          <SearchResult
            :keyword="searchKeyword"
            :add-contact="addContactActive"
          ></SearchResult>
        </div>
      </el-scrollbar>
    </template>

    <template #right-content> <router-view></router-view> </template>
  </Layout>
</template>

<script setup lang="ts">
import Layout from "@/components/layout/Layout.vue";
import SearchResult from "@/components/search/SearchResult.vue";
import ContactItem from "@/components/contact/ContactItem.vue";

import { ref } from "vue";
import { getAllUserContact } from "@/api/contact";
import { computed } from "@vue/reactivity";

// 搜索内容
const searchKeyword = ref("");

const addContactActive = ref(false);

const newFriendMenu = ref<any>([
  {
    group_key: "new_friend",
    title: "新的朋友",
    type: 1,
    list: [{ id: 1, name: "新的朋友", avatar: "" }],
  },
]);

const collectedFriendMenu = ref<any>([
  {
    group_key: "collected_friend",
    title: "星标朋友",
    type: 2,
    list: [],
  },
]);

const officalAccount = ref<any>([
  {
    group_key: "offical_account",
    title: "公众号",
    type: 3,
    list: [{ id: 1, name: "公众号", avatar: "" }],
  },
]);

const groupChat = ref<any>([
  {
    group_key: "group_chat",
    title: "群聊",
    type: 5,
    list: [
      {
        id: 1,
        name: "测试群聊1111111111111111111",
        avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
      },
    ],
  },
]);

const friendGroupMenu = ref<any>([]);

// 菜单组
const menuGroup = computed(() => {
  return [
    ...newFriendMenu.value,
    ...collectedFriendMenu.value,
    ...officalAccount.value,
    ...groupChat.value,
    ...friendGroupMenu.value,
  ];
});

const changeAddContactActive = () => {
  addContactActive.value = !addContactActive.value;
  searchKeyword.value = "";
};

// 获取所有用户联系人信息
const getAllContact = async () => {
  const result: any = await getAllUserContact();

  if (!result) {
    return;
  }

  const collectedUser = result.data.collectedUser;
  const friendGroup = result.data.friendGroup;
  const group = result.data.group;

  // 处理联系人
  if (friendGroup) {
    for (const item of Object.keys(friendGroup)) {
      let list = friendGroup[item];

      friendGroupMenu.value = friendGroupMenu.value.concat({
        group_key: "friend_group",
        title: `${item}`,
        type: 2,
        list: list.map((item: { uid: any; nickname: any; avatar: any }) => {
          return {
            id: item.uid,
            name: item.nickname,
            avatar: item.avatar,
          };
        }),
      });

      console.log(menuGroup.value);
    }
  }

  console.log("collectedUser--->", collectedUser);
  if (collectedUser) {
    collectedFriendMenu.value.list = collectedUser.map(
      (item: { uid: any; nickname: any; avatar: any }) => {
        return {
          id: item.uid,
          name: item.nickname,
          avatar: item.avatar,
        };
      }
    );
  }

  if (group) {
    groupChat.value = group;
  }
};

getAllContact();
</script>

<style scoped lang="scss">
.header {
  height: 60px;
  background-color: #f7f7f7;
  padding: 25px 12px 12px 12px;
  border-bottom: 1px solid #e9e9e9;

  .operate-area {
    height: 25px;
    // border-radius: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search {
      background-color: #e2e2e2;
      width: 100%;
      height: 25px;
      border-radius: 5px;
      display: flex;
      flex: 1;
      /* 添加 */
      align-items: center;
      /* 垂直居中 */
      justify-content: start;
      /* 水平居中 */
      font-size: 20px;
      /* 控制图标大小 */
      position: relative;

      :deep(.el-input__wrapper) {
        border: 5px;

        --el-input-focus-border-color: #dcdfe6;
        --el-input-bg-color: #e2e2e2;

        &.is-focus {
          --el-input-bg-color: #f9f9f9;
        }
      }

      &:focus-within {
        background-color: #f9f9f9;
        border: 1px solid #dedcdb;
      }

      span {
        margin: 0 5px;
      }
    }

    .add-operate {
      margin-left: 10px;
      width: 25px;
      height: 25px;

      .add-contact {
        background-color: #e2e2e2;
        height: 100%;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        display: flex;
        /* 添加 */
        align-items: center;
        /* 垂直居中 */
        justify-content: center;
        /* 水平居中 */

        &:hover {
          background-color: #d1d1d1;
          cursor: pointer;
        }

        span {
          .icon-tianjia {
            display: inline-block;
            /* 防止内容撑开 */
            width: 16px;
            /* 图标实际大小 */
            height: 16px;
            /* 图标实际大小 */
            font-size: 16px;
            /* 控制图标大小 */
          }
        }
      }

      .add-contact-cancel {
        font-size: 12px;
        text-align: center;
        height: 100%;
        width: 100%;
        display: flex; /* 设置为 Flex 布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}

.contack-book-manage {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;

  .manage-box {
    border: 1px solid #d9d9d9;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;

    font-size: 15px;

    &:hover {
      cursor: pointer;
    }

    span {
      &:first-child {
        margin-right: 5px;
      }
    }
  }
}
</style>
